<template>
  <div class="contentBox">
    <div style="margin-bottom: 16px">
      <a-button type="primary" @click="addNodeBtn">新增</a-button>
    </div>
    <a-table :columns="columns" :data-source="nodeData.nodeDataList" bordered :autoDataLoad="false">
      <template #bodyCell="{ column, record  }">
        <template v-if="column.dataIndex === 'operation'">
          <a href="#" @click="editNode(record)" style="margin-right: 20px">编辑</a>
          <a-popconfirm
            title="确定要删除这一个节点吗?"
            ok-text="是"
            cancel-text="否"
            @confirm="delNodeById(record.id)"
          >
            <a href="#" style="color: red">删除</a>
          </a-popconfirm>
        </template>
      </template>
      <template #title>节点信息</template>
      <template #footer>节点信息管理</template>
    </a-table>
    <a-drawer
      :title="nodeData.isAdd?'新增链路':'编辑链路'"
      :width="720"
      :visible="nodeData.isShow"
      :body-style="{ paddingBottom: '80px' }"
      :footer-style="{ textAlign: 'right' }"
      @close="closeDrawer"
    >
      <a-form
        :model="form"
        :rules="rules"
        layout="vertical"
        ref="formRef"
        @finish="nodeData.isAdd?saveNode():updataNodeItem()"
      >
        <a-row :gutter="16">
          <a-col :span="20">
            <a-form-item label="链路编号" name="node_name">
              <a-input v-model:value="form.node_name" placeholder="请输入链路名称" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="16">
          <a-col :span="24">
            <a-form-item :wrapper-col="{ offset: 18 }">
              <a-space>
                <a-button @click="closeDrawer">取消</a-button>
                <a-button type="primary" html-type="submit">保存</a-button>
              </a-space>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
      <template #extra>
        <a-space>
          <a-button type="primary" @click="resetForm">重置</a-button>
        </a-space>
      </template>
    </a-drawer>
  </div>
</template>
<script lang="ts">
import { defineComponent, onMounted, reactive, ref } from 'vue';
import { getAllNode, addNode, delNode, updataNode } from '@/utils/node';
import { message } from 'ant-design-vue';
import type { FormInstance } from 'ant-design-vue';
import type { Rule } from 'ant-design-vue/es/form';

interface NodeDataDto {
  id?: number
  node_name: string
}

interface ResultDto {
  code: number
  data: Array<NodeDataDto>
  message: string
}

const columns = [
  {
    title: '节点名称',
    dataIndex: 'node_name',
  },
  {
    title: '操作',
    dataIndex: 'operation',
  },
];

// let data: LianluDataDto[] = [];
export default defineComponent({
  setup() {
    const formRef = ref<FormInstance>();
    let form = reactive<NodeDataDto>({
      id: 0,
      node_name: ''
    });
    // 数据
    let nodeData = reactive({
      nodeDataList: [],
      isShow: true,
      isAdd: true
    })
    const rules: Record<string, Rule[]> = {
      node_name: [{ required: true, message: '请输入节点名称', trigger: 'blur' }],
    };
    // 获取链路信息列表
    const getNodeList = function () {
      getAllNode().then((res) => {
        const result = res as unknown as ResultDto
        if (result.code === 200) {
          console.log(res.data);
          nodeData.nodeDataList = res.data
        }
      })
    }
    const addNodeBtn = function () {
      nodeData.isShow = true;
      nodeData.isAdd = true;
    }
    // 删除链路
    const delNodeById = function (id: string) {
      delNode(id).then(res => {
        const result = res as unknown as ResultDto
        if (result.code === 200) {
          getNodeList();
          message.success('删除成功');
        }
      })
    }
    // 保存链路
    const saveNode = function () {
      delete form['id']
      addNode(form).then(res => {
        const result = res as unknown as ResultDto
        if (result.code === 200) {
          message.success(result.message);
          getNodeList();
          closeDrawer()
        } else {
          message.error(result.message)
        }
      })
    }
    // 编辑链路
    const editNode = (info: NodeDataDto) => {
      Object.assign(form, info)
      console.log(form);
      nodeData.isAdd = false;
      nodeData.isShow = true;
    }
    // 更新链路
    const updataNodeItem = () => {
      console.log(form);
      updataNode(form).then(res => {
        const result = res as unknown as ResultDto
        if (result.code === 200) {
          message.success(result.message);
          getNodeList();
          closeDrawer()
        } else {
          message.error(result.message)
        }
      })
    }
    // 重置表单内容
    const resetForm = () => {
      const value = formRef.value as FormInstance;
      value.resetFields();
    };
    // 关闭抽屉
    const closeDrawer = function () {
      resetForm()
      nodeData.isShow = false
    }

    onMounted(() => {
      nodeData.isShow = false
      getNodeList()
    })
    return {
      nodeData,
      columns,
      form,
      rules,
      formRef,
      // function
      resetForm,
      addNodeBtn,
      delNodeById,
      closeDrawer,
      saveNode,
      editNode,
      updataNodeItem
    };
  },
});
</script>
<style scoped>
th.column-money,
td.column-money {
  text-align: right !important;
}
.contentBox {
  margin: 20px;
  padding: 20px;
  box-shadow: 0 0 8px 2px #ddd;
}
</style>
